<template>
  <h2>App父级组件：Suspense组件的使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
      <!-- <AsyncComponent /> -->
      <async-address />
    </template>
    <template v-slot:fallback>
      <!-- Loading的内容 -->
      <h2>Loading...</h2>
    </template>
  </Suspense>
</template>

<script lang='ts'>
import { defineAsyncComponent, defineComponent } from "vue";
//引入组件：静态引入和动态引入

//Vue2的动态引入组件的写法：(在vue3中这种写法不行)
//const AsyncComponent = () => import('./components/AsyncComponent.vue');

//vue3中的动态引入组件放入写法：
// const AsyncComponent = defineAsyncComponent(
//   () => import("./components/AsyncComponent.vue")
// );

//vue3静态引入
//import AsyncComponent from './components/AsyncComponent.vue';
import AsyncAddress from "./components/AsyncAddress.vue";
export default defineComponent({
  name: "App",
  components: {
    //AsyncComponent,
    AsyncAddress,
  },
  setup() {
    return {};
  },
});
</script>
